<template>
  <div>
  <div class="cate">
    <van-grid column-num="2">
     <div v-if="!cateObjeck.length">
      <img class="lose" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F02%2F19%2F03%2F59af37f562372_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627088369&t=0f10ec64d0312e327af20be67b280f17" >
    </div>
    <!-- <van-grid-item  v-else  v-for="item in cateObjeck" icon-prefix="icon" :id="item.icon" :text="item.name" :key="item.id" v-html="item.detailinfo" /> -->
    <div v-for="item in cateObjeck" :key="item.id" class="good-list" @click="$router.push({
      path:'/category',
      query:item.id
    })">
              
               <img v-lazy="item.imgs.split(`||`)[0] "  class="imgs">
              <div class="desc">
              <p class="good-name">{{item.name.substr(0,10)+'...'}}</p>
              <span class="price">￥{{item.price}}</span>
              <span class="views">浏览量{{item.agoprice}}</span>
              <van-icon name="shopping-cart-o" tag="p" @click.stop="addCart(item)" />
              </div>
            </div>
    </van-grid>
    </div>
  </div>
</template>

<script>
  export default {
    
      props:['cateObjeck'],
      methods:{
        addCart(item){
          this.$emit("insert",item)
          
        }
      }
  }
</script>

<style lang="scss" scoped>
.cate{
 
  padding-bottom: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .cate-list{
    width: 40%;
    text-align: center;
  }


}
.good-list{
    width: 100%;
    display: block;
    padding: 10px;
    // background: powderblue;
    border-radius: 5px;
    margin: 10px 5px;
    background: #eee;
    border-radius: 5px;
    display: flex;
  }
   .imgs{
     width: 40%;
    
   }
   .desc{
     flex: 1;
     height: 100%;
     text-align: left;
     padding: 0 20px;
     overflow-x:hidden;
   }
    .good-name{
     margin-bottom: 20px;
     padding-bottom: 30px;
   }
   .price{
     text-align: right;
     color: red;
     font-size: 14px;
     
     margin-right:20px;
     font-weight: 600;
   }
   .views{
     font-size: 12px;
     text-align: right;
   }
   .van-grid{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
   }
   .lose{
     width: 40%;
     margin-top: 60%;
   }
    
   .views{
     font-size: 12px;
     text-align: right;
   }
   .van-icon-shopping-cart-o{
     display: block;
     text-align: right;
     font-size: 30px;
     padding-right: 20px;
     color: orange;
     
   }
</style>